<template>
  <van-popup
    v-model="showCompleteOrderPopup"
    position="bottom"
    @close="closeCompleteOrderPopup"
    class="popDiv"
  >
    <div>
      <div class="headDiv">
        <img :src="closeimg" @click="closeCompleteOrderPopup" class="img" />
        <div class="title">确认订单</div>
      </div>
      <div class="infoDiv">
        <div class="titleDiv">维修信息</div>
        <div class="infoContentDiv">
          <div class="yellowTitle">修改金额</div>
          <div class="rightContentView">
            <div class="cellDiv">
              <div class="cellTitle">维修类型</div>
              <div class="cellContent">{{ orderDetail.repairTypeName }}</div>
            </div>

            <div class="cellDiv">
              <div class="cellTitle">维修内容</div>
              <div class="cellContent">{{ orderDetail.repairContentName }}</div>
            </div>

            <div class="cellDiv">
              <div class="cellTitle">维修金额</div>
              <div class="cellMoney">¥{{ orderDetail.price }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="infoDiv">
        <div class="titleDiv">维修图片</div>
        <div class="infoContentDiv">
          <div class="yellowTitle">上传图片</div>
          <div class="uploaderDiv">
            <van-uploader
              v-model="fileList"
              multiple
              :max-count="3"
              :after-read="afterRead"
              :before-delete="beforeDelete"
            >
              <div class="cameraDiv">
                <img :src="camera" class="cameraImg" />
                <div class="cameraTitle">{{ imageStr }}</div>
              </div>
            </van-uploader>
          </div>
        </div>
      </div>

      <div class="buttonDiv">
        <van-button class="button" @click="submitClick">确定</van-button>
      </div>
    </div>
  </van-popup>
</template>

<script>
import { api_upLoad } from "@/service/api/upLoad";
import { isPhoneNum, addImagePrefix, removeImagePrefix } from "@/utils/utils";

export default {
  name: "CompleteOrderPopup",
  data() {
    return {
      showKeyboard: true,
      closeimg: require("@/images/icon/login/delete.png"),
      camera: require("@/images/icon/order/camera.png"),

      // 文件上传列表
      fileList: [],
      urlfileList: []
    };
  },
  methods: {
    submitClick() {
        var urlList = '';
        for (var i = 0;i < this.fileList.length; i++){
            var file = this.fileList[i];
            if (i == 0){
                urlList += removeImagePrefix(file.url);
            } else {
                urlList = urlList + ','+removeImagePrefix(file.url);
            }
        }

        this.submitWithImgUrl(urlList);

    },
    afterRead(files) {
      // urlfileList 确保列表中都显示的是 远程图片  filelist中会默认添加本地图片 所以要覆盖一下
      if (files instanceof Array) {
        for (var i = 0; i < files.length; i++) {
          var file = files[i];
          api_upLoad(file.file)
            .then(res => {
              this.urlfileList.push({ url: addImagePrefix(res.data.url) });
              this.fileList = this.urlfileList;
            })
            .catch(error => {
              this.fileList = this.urlfileList;
              this.$toast(error.message);
            });
        }
      } else {
        api_upLoad(files.file)
          .then(res => {
            this.urlfileList.push({ url: addImagePrefix(res.data.url) });
            this.fileList = this.urlfileList;
          })
          .catch(error => {
            this.fileList = this.urlfileList;
            this.$toast(error.message);
          });
      }
    },

    beforeDelete(file) {
      for (var i = 0; i < this.urlfileList.length; i++) {
        var fileUrl = this.urlfileList[i].url;
        if (fileUrl === file.url) {
          this.urlfileList.splice(i, 1);
          this.fileList = this.urlfileList;
          return;
        }
      }
    }
  },
  props: {
    showCompleteOrderPopup: Boolean,
    closeCompleteOrderPopup: Function,
      submitWithImgUrl: Function,
    orderDetail: Object
  },
  computed: {
    imageStr() {
      console.log(this.fileList);

      if (this.fileList.length == 0) {
        return "添加图片";
      } else if (this.fileList.length == 1) {
        return "1/3";
      } else if (this.fileList.length == 2) {
        return "2/3";
      } else {
        return "图片上限";
      }
    }
  }
};
</script>

<style scoped>
.popDiv {
  /*padding:1.3333333333333333rem;*/
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding-bottom: 2.3rem;
}
.headDiv {
  position: relative;
  margin-top: 1.3333333333333333rem;
  margin-left: 1.6rem;
  margin-right: 1.3333333333333333rem;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 0.5rem;
}

.title {
  height: 1.5rem;
  font-size: 1.0666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(18, 28, 50, 1);
  line-height: 1.5rem;
}

.img {
  position: absolute;
  top: 0.3rem;
  left: 0;
  height: 1rem;
  width: 1rem;
}
.buttonDiv {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.button {
  margin-top: 0.3rem;
  width: 8rem;
  background: rgba(57, 123, 230, 1);
  border-radius: 1.6333333333333333rem;
  color: white;
  font-size: 1.0666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
}

.infoDiv {
  display: flex;
  flex-direction: column;
  padding: 0 1.6rem;
  padding-bottom: 1.7333333333333334rem;
  border-bottom: 0.5px solid #f0f1f5;
}

.infoContentDiv {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 0.7rem;
}
.titleDiv {
  height: 1.4rem;
  font-size: 1rem;
  font-family: PingFangSC-Medium, PingFangSC;
  font-weight: 500;
  color: rgba(18, 28, 50, 1);
  line-height: 1.4rem;
  margin-top: 0.5rem;
}
.yellowTitle {
  flex-shrink: 0;

  font-size: 0.6666666666666666rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(245, 166, 35, 1);
  line-height: 0.9333333333333333rem;

  width: 3.5333333333333333rem;
  height: 1.1rem;
  border-radius: 0.13333333333333333rem;
  border: 1px solid rgba(245, 166, 35, 1);

  text-align: center;
}

.rightContentView {
  margin-left: 2rem;
  margin-right: 2rem;
}
.cellDiv {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.cellTitle {
  flex-shrink: 0;
  margin-bottom: 0.5rem;

  width: 3.466666666666667rem;
  height: 1.2333333333333334rem;
  font-size: 0.8666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(122, 132, 145, 1);
  line-height: 1.2333333333333334rem;
}
.cellContent {
  margin: 0 1.3rem;
  font-size: 0.8666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(18, 28, 50, 1);
  line-height: 1.2333333333333334rem;
}
.cellMoney {
  margin: 0 1.3rem;
  height: 1.2333333333333334rem;
  font-size: 0.8666666666666667rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(242, 62, 84, 1);
  line-height: 1.2333333333333334rem;
}
.uploaderDiv {
  margin: 0 2rem;
}
.cameraDiv {
  width: 4rem;
  height: 4rem;
  background: rgba(255, 255, 255, 1);
  border-radius: 0.26666666666666666rem;
  border: 1px solid rgba(240, 241, 245, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cameraImg {
  width: 1.0666666666666667rem;
  height: 1.0666666666666667rem;
  margin-bottom: 0.3333333333333333rem;
}
.cameraTitle {
  margin-top: 0.3333333333333333rem;
  height: 1.1rem;
  font-size: 0.8rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: rgba(191, 195, 205, 1);
  line-height: 1.1rem;
}

.uploaderDiv >>> .van-uploader__preview-image {
  width: 4rem;
  height: 4rem;
  margin-right: 0.2rem;
}
</style>
